<template>
	<view class="">
		<view class="container">
			<view class="top-dro zl-flex zl-row-between">
				<text class="zl-font-26 zl-color-white">如何使用形象克隆?</text>
				<view class="btn zl-flex zl-row-center" @click="check">
					<text>查看介绍</text>
				</view>
			</view>
			<view class="box_title zl-flex" style="margin-top: 0;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">1</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">克隆人命名</text>
			</view>
			<view class="form_box">
				<view class="form_item form_item_line zl-flex zl-row-between">
					<view class="form_item_right zl-flex zl-row-right">
						<input style="width: 100%;" v-model="form.name" placeholder="请输入克隆人命名" :border="false"
							type="text" :clearable="false" placeholderStyle="color:#999;fontSize:28rpx"
							:cursor-spacing="80" :maxlength="20" />
					</view>
				</view>
			</view>
			<view class="box_title zl-flex">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">2</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">上传视频</text>
			</view>
			<view class="form_box1 zl-flex-col zl-col-center" @click="$refs.popup3.open()" v-if="!videoUrl">
				<view class="zl-flex-col zl-col-center" style="margin-bottom: 52px;">
					<image src="/static/new/icon_shuzhiren_01.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
					<text class="zl-color-000 zl-font-28 zl-m-t-20">上传训练视频</text>
				</view>
				<view class="zl-flex-col" style="width: 100%;">
					<view class="zl-flex">
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">文件大小: 小于500MB</text>
						</view>
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">文件格式: mp4、mov</text>
						</view>
					</view>
					<view class="zl-flex zl-m-t-20">
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">视频建议: 30秒~180秒</text>
						</view>
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">画质推荐: 1080P</text>
						</view>
					</view>
					<view class="zl-flex zl-m-t-20">
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">视频尺寸: 9:16(竖屏)</text>
						</view>

					</view>
				</view>
			</view>
			<view class="imageBox zl-flex zl-row-center zl-m-t-30" v-else>
				<image :src="videoUrl+OssVideoShrink" mode="aspectFit"></image>
				<image src="/static/icon/play.png" mode="" @click="previewVideo(videoUrl)"
					style="width: 50rpx;height: 50rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%);">
				</image>
				<image src="/static/new/icon_shuzhiren_error.png" mode="" @click="delVideoUrl"
					style="position: absolute;right: 0;top: 0;width: 40rpx;height: 40rpx;">
				</image>
			</view>
			<view class="box_title zl-flex">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">3</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">数字人授权</text>
			</view>
			<view class="form_box1 zl-flex-col zl-col-center zl-m-b-30" @click="toUploadAuth" v-if="!authVideoUrl">
				<view class="zl-flex-col zl-col-center" style="margin-bottom: 52px;">
					<image src="/static/new/icon_shuzhiren_02.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
					<text class="zl-color-000 zl-font-28 zl-m-t-20">上传授权视频</text>
				</view>
				<view class="zl-flex-col" style="width: 100%;">
					<view class="zl-flex ">
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">文件大小：小于100MB</text>
						</view>
						<view class="zl-flex" style="width: 50%;">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">文件格式: mp4、mov</text>
						</view>
					</view>
					<view class="zl-flex zl-m-t-20">
						<view class="zl-flex">
							<view class="dig zl-m-r-20"></view>
							<text class="zl-color-999 zl-font-20">录制时，请流畅、一字不落的念出提示词中的内容</text>
						</view>

					</view>
				</view>
			</view>
			<view class="imageBox zl-flex zl-row-center zl-m-t-30" v-else>
				<image :src="authVideoUrl+OssVideoShrink" mode="aspectFit"></image>
				<image src="/static/icon/play.png" mode="" @click="previewAuthVideo()"
					style="width: 50rpx;height: 50rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%);">
				</image>
				<image src="/static/new/icon_shuzhiren_error.png" mode="" @click="delAuthVideoUrl"
					style="position: absolute;right: 0;top: 0;width: 40rpx;height: 40rpx;">
				</image>
			</view>
		</view>
		<view class="footer zl-flex zl-row-center">
			<view class="btn zl-theme-btn" @click="create()"> 开始克隆 </view>
		</view>

		<uni-popup :animation="true" ref="popup3" type="bottom" background-color="#EEF0F4" :safe-area="false"
			borderRadius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="popup3">
				<view class="zl-flex zl-row-center">
					<text class="zl-font-32 zl-color-333 zl-text-center zl-font-700">拍摄教程</text>
				</view>
				<image src="/static/icon/popclose2.png" @click="$refs.popup3.close()"
					style="width: 23rpx;height: 23rpx;position: absolute;top: 30rpx;right: 30rpx;" mode="">
				</image>
				<view class="zl-flex zl-m-b-30 zl-m-t-30">
					<view class="line zl-m-r-16"></view>
					<text class="zl-font-32 zl-color-333 zl-font-700">正确示例</text>
				</view>
				<image src="http://zltest.zhim123.com/oem/img_jiaocheng_01.png" mode=""
					style="width: 690rpx;height: 334rpx;">
				</image>
				<view class="zl-flex zl-m-b-30 zl-m-t-30">
					<view class="line zl-m-r-16"></view>
					<text class="zl-font-32 zl-color-333 zl-font-700">错误示例</text>
				</view>
				<image src="http://zltest.zhim123.com/oem/img_jiaocheng_02.png" mode=""
					style="width: 690rpx;height: 200rpx;">
				</image>

			</view>
			<view class="footer zl-flex zl-row-center">
				<mediaGroup :list="list" :min="min" :max="max" :len="1" :size="mediaSize"
					@success="media_success($event)">
				</mediaGroup>
			</view>
		</uni-popup>


		<uni-popup :animation="true" ref="popup4" type="bottom" background-color="#EEF0F4" :safe-area="false"
			borderRadius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="popup3">
				<view class="zl-flex zl-row-center">
					<text class="zl-font-32 zl-color-333 zl-text-center zl-font-700">上传授权视频</text>
				</view>
				<image src="/static/icon/popclose2.png" @click="$refs.popup4.close()"
					style="width: 23rpx;height: 23rpx;position: absolute;top: 30rpx;right: 30rpx;" mode="">
				</image>
				<view class="zl-flex zl-m-b-30 zl-m-t-30">
					<view class="line zl-m-r-16"></view>
					<text class="zl-font-32 zl-color-333 zl-font-700">真实姓名</text>
				</view>
				<view class="zl-bg-color-white" style="padding: 30rpx;border-radius: 18rpx;">
					<input class="uni-input" v-model="userName" placeholder="请输入您真实的姓名" @input="toUploadAuth" />
				</view>
				<view class="zl-flex zl-m-b-30 zl-m-t-30">
					<view class="line zl-m-r-16"></view>
					<text class="zl-font-32 zl-color-333 zl-font-700">提示词</text>
				</view>
				<view class="tipsDescBox">
					<text>{{ form.authText }}</text>
					<view class="zl-flex-col zl-col-center" style="position: absolute;right: 30rpx;bottom:30rpx;"
						@click="$util.copy(this.form.authText)">
						<image src="/static/aiCreate/icon_wenan_copy.png" style="width: 40rpx;height: 40rpx;" mode="">
						</image>
						<text class="zl-font-20 zl-color-333 zl-m-t-8">复制文本</text>
					</view>
				</view>
			</view>
			<view class="footer zl-flex zl-row-center" style="gap: 20rpx;">
				<view class="btn11 zl-flex zl-row-center zl-col-center" @click="toHistory">
					历史授权视频
				</view>
				<mediaAuth :list="authList" :max="max" :len="1" :userName="userName"
					@success="media_auth_success($event)">
				</mediaAuth>
			</view>
		</uni-popup>


		<uni-popup :animation="false" ref="popup2" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-34 zl-font-bold zl-width-100 zl-text-center"
					style="position: relative;">
					使用者协议 <image @click="closePop()"
						style="width: 30rpx;height: 30rpx;position: absolute;right: -20rpx;top: 8rpx;"
						src="/static/icon/pop_close.png" mode=""></image>
				</view>
				<view class="zl-color-000 zl-font-26 zl-m-t-30 scroll-box">
					<text class="zl-font-bold ">本人在此授权并承诺:</text></br> 1、<text
						class="zl-font-bold underlined">本人向当前登录平台(以下称“本平台”)提供</text>
					<text>(包括但不限于通过线上上传、线下等方式提供)</text><text
						class="zl-font-bold">的数据</text>(包括但不限于文字、图片、视频、音频等各种形式的内容，以及其中包含的姓名、电话号码、身份证号码、脸型、五官、身体部位、人物动作、服饰妆容、声音、文字、台词、音乐、音频、视觉设计等所有组成部分，以下统称为“数据”)的<text
						class="zl-font-bold underlined">唯一权利人为本人或本人已取得全体权利人</text>(包括但不限于著作权人等知识产权人、肖像权人、声音权人、个人信息权人、所有权人等)的合法完整授权(包括但不限于:生物识别信息编辑权、复制权、翻译权、汇编权、信息网络传播权、改编权及制作衍生品、表演和展示的权利等)(本平台有权视情况要求本人提供相关授权文件);
					</br>2、无论数据来源于本人还是第三方， <text class="zl-font-bold underlined">数据所涉及的全体权利人均同意本人使用账号</text>
					(即本人注册本平台使用的手机号) <text
						class="zl-font-bold underlined">将数据用于声音制作、包含权利人肖像、声音等的视频模板(以下简称“视频模板”)制作及其衍生作品的制作、发布。
					</text>
					<text class="zl-font-bold underlined">数据授权可能产生的商业价值分配纠纷或其他潜在的纠纷皆为本人与数据所涉权利人之间的问题，均由本人自行处理，与本平台无关。
					</text></br>
					<text class="zl-font-bold underlined">3、数据所涉及的全体权利人均已知悉并同意本平台提供的针对视频模板涉及个人数据的处理能力，包括:</text></br>
					<view class="zl-font-bold underlined">(1)姓名、电话号码、身份证号码，用于本人账号的实名认证。</br>
						(2)训练视频中的脸型、五官、身体部位、人物动作、服饰妆容，用于定制视频模板形象。</br> (3)训练音频，用于定制视频模板声音。</br>
						</br> 4、本人保证向本平台提供的数据均真实合法合规有效、不违背公序良俗且不侵犯任何人的合法权益(包括但不限于著作权等知识产权、个人隐私权、个人信息权、肖像权、声音权等)。
						</br>5、本人通过本平台从事或拟从事的行为属于合法合规正当的行为。本人不会利用本平台实施任何违反中华人民共和国法律法规政策、危害国家安全和利益、损害国家形象、侵害社会公共利益、扰乱经济和社会秩序、违反本平台规则(包括但不限于:用户协议、隐私政策)、违反公序良俗或侵害他人合法权益的行为，包括但不限于:隐瞒制作的内容为深度合成的情况;利用本平台制作、复制、发布、传播虚假内容、黄赌毒等违法违规内容、侵犯他人的合法权益的内容、歪曲或篡改原作者(或原人物，原权利人)思想或原作者(或原人物，原权利人)的意思表示的内容、降低原作者(或原人物，原权和人)社会评价的内容。</br>6、本人不得对素材、模板以及输出内容中的人物肖像(如有)以冒犯、侵权、违法等任何不当方式使用，不当方式包括但不限于:</br>(1)在色情图像或类似情形中使用;
						</br>(2)用于暗示人物参与不道德或非法行为; </br>(3)用于暗示人物遭受身体或精神衰弱、疾病等状况: </br>(4)用于政治性代言的行为;
						</br>(5)用于产品或服务代言的行为; </br>(6)导致人物社会评价降低的行为; </br>(7)其他可能对人物有冒犯或贬低的行为。
						</br>7、本平台有权对本人制作(或发布)的内容进行审核，但对本人制作(或发布)的任何内容均不承担任何明示或默示的保证，均不代表本平台观点或意见。</view>
					本平台有权根据相关证据结合《民法典》《信息网络传播权保护条例》等法律法规及本条款的规定对侵权信息或违法违规信息进行处理。 <view class="zl-font-bold underlined">
						</br>8、本人应自行对其提供的数据、利用本平台所从事的活动、通过本平台进行的活动、或利用制作内容所进行的活动所引起的一切后果承担全部责任，本平台的所有者、运营方及关联方对此不承担任何责任。</br>9、在任何情况下，本平台、本平台的所有者、运营方及关联方均不对任何间接性、后果性、惩戒性、偶然性、特殊性的损害，包括本人使用本平台服务而遭受的利润损失承担责任(即使本平台、本平台的所有者、运营方及关联方已被告知该等损失的可能性)</br>10、本平台有权在本人制作内容的合理位置、区域进行显著标识，提示深度合成情况，本人不得采用技术手段删除、篡改、隐匿深度合成标识。</br>11、本人违反上述条款的，本平台有权立即停止相关服务、删除相关数据(如:制作的结果)、终止服务或采取其他合理措施减少损失，并有权追究本人的违约责任等法律责任，也无需向本人退还支付的任何费用，并有权要求本人赔偿所有损失(包括但不限于直接损失、间接损失、商誉损害、律师费用、诉讼费、保全费、保全担保费、鉴定费、调查费、公证费和其他法律开支等一切维护权益的费用及本平台因此向第三方承担的赔偿款、和解/调解费等全部费用)。
						本人违反上述条款的，本平台还有权根据司法部门或监管部门的要求，向其提供本人在本平台注册的个人信息(姓名、电话号码、身份证号码)及向本平台提交/利用本平台生成的全部数据。
						</br>12、本人系具有完全民事行为能力的年满18周岁的成年人，完全理解上述条款的含义并同意遵守上述条款。</view>
				</view>
				<view class="btn zl-m-t-42 zl-theme-btn" @click="agree()"> 我已知晓并同意 </view>
			</view>
		</uni-popup>

		<uni-popup background-color="#fff" ref="pop2" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">预览素材</view>
					<image @click="closeVideo()" style="width: 30rpx;" src="/static/icon/pop_close.png" mode="widthFix">
					</image>
				</view>
				<view class="popup-video">
					<video :src="activeVideo" :controls="true"></video>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import mediaGroup from '@/components/media_group.vue';
	import mediaAuth from '@/components/media_auth.vue'
	export default {
		components: {
			mediaGroup,
			mediaAuth
		},
		data() {
			return {
				list: [],
				authList: [],
				form: {
					name: '',
					mateUserFileId: 0,
					authMateId: 0,
					authText: ''
				},
				mediaSize: 500,
				max: 180,
				min: 30,
				config: {},
				name: getApp().globalData.oemName,
				appid: getApp().globalData.appid,
				userName: '',
				authText: '',
				OssVideoShrink: getApp().globalData.OssVideoShrink,
				ossVideoCover: getApp().globalData.ossVideoCover,
				authVideoUrl: '',
				videoUrl: '',
				activeVideo: ''
			};
		},
		async onLoad() {
			this.$refs.popup2.open()

			try {
				var data = await new Promise((resolve, reject) => {
					uni.request({
						url: `https://szrjch5.zhim123.com/audit.json?ts=${new Date().getTime()}`,
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data)

							}
						},
						fail: (err) => {
							reject(new Error('配置请求失败！'));
						}
					})
				});
				this.config = data[this.appid]
				console.log(this.config);
			} catch (err) {
				console.log(err.message);
			}
			uni.$on('chooseHistoryModelId', (res) => {
				this.$refs.popup4.close()
				if (res) {
					this.authVideoUrl = res.coverUrl
					this.form.authMateId = res.mateId
					console.log(res, 'res11');
				}
			})
		},
		onUnload() {
			uni.$off('chooseHistoryModelId')

		},
		methods: {
			closeVideo() {
				setTimeout(() => {
					this.activeVideo = ''
				}, 250);
				this.$refs.pop2.close()
			},
			previewAuthVideo(item) {
				this.api.userfile.geturl({
					mateId: this.form.authMateId,
				}).then(res => {
					if (res.code === 0) {
						this.activeVideo = res.data.url;
						this.$refs.pop2.open()
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			previewVideo(url) {
				this.activeVideo = url;
				this.$refs.pop2.open()
			},
			delAuthVideoUrl() {
				this.authVideoUrl = ''
				this.form.authMateId = 0
			},
			delVideoUrl() {
				this.videoUrl = ''
				this.form.mateUserFileId = 0
			},
			toHistory() {
				if (!this.userName) {
					this.$util.msg('请先填写姓名！')
					return
				}
				uni.navigateTo({
					url: '/pages/clone/historyAuthList'
				})
			},
			replaceText() {
				if (this.userName) {
					this.form.authText =
						`我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
				} else if (this.name) {
					this.form.authText =
						`我是${this.userName ? this.userName : 'XXX'}，特此声明，同意授权${this.name}，对我的形象进行克隆，用于数字人视频合成。`
				}
			},
			toUploadAuth() {
				this.replaceText()
				this.$refs.popup4.open()
			},
			create() {
				if (!this.form.name) {
					return this.$util.msg('请填写名称！')
				}
				
				if (this.form.mateUserFileId <= 0) {
					return this.$util.msg('请上传训练视频文件！')
				}
				if (this.form.authMateId <= 0) {
					return this.$util.msg('请上传授权视频文件！')
				}
				this.api.clone.submitdigital2(this.form).then(res => {
					if (res.code === 0) {
						getApp().globalData.isReload = true;
						uni.redirectTo({
							url: '/pages/clone/success?type=1'
						})
					} else {
						this.$util.msg(res.msg)
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！')
				})
			},
			to_myClone() {
				uni.switchTab({
					url: '/pages/myClone/myClone'
				});
				this.$refs.popup.close()
			},
			media_success(res) {
				console.log(res);
				if (res) {
					this.$refs.popup3.close()
					this.list = res
					if (res[0]) {
						this.videoUrl = res[0].url
						this.form.mateUserFileId = res[0].userFileId
					}
				}
			},
			media_auth_success(res) {
				console.log(res);
				if (res) {
					// this.form.authText = this.authText
					this.$refs.popup4.close()

					this.authList = res
					if (res[0]) {
						this.authVideoUrl = res[0].url
						this.form.authMateId = res[0].mateId
					}
				}
			},
			agree() {
				this.$refs.popup2.close();
			},
			closePop() {
				uni.navigateBack()
			},
			check() {
				let url =	'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/'+getApp().globalData.jiaochengUrl1+'.mp4'
				if (this.config.isAudit) {
					this.$util.toWebView('https://szrjch5.zhim123.com/pages/learn/page2')
				} else {
					this.$util.toWebView(
						`https://szrjch5.zhim123.com/pages/video/index?url=${encodeURIComponent(url)}&title=教学视频`
					)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 50rpx 30rpx 0;
		height: calc(100vh - 190rpx);
		overflow-y: scroll;
	}

	.top-dro {
		border-radius: 20rpx;
		width: 690rpx;
		height: 90rpx;
		// background: url("") no-repeat;
		// background-size: 100% 100%;
		background-color: #000;
		margin: 0 auto 50rpx;
		padding: 0 30rpx;
		// box-shadow: 0rpx 26rpx 30rpx 0rpx rgba(55, 58, 167, 0.24);

		.btn {
			width: 140rpx;
			height: 46rpx;
			border-radius: 6rpx;
			border: 1rpx solid #ffffff;
			font-size: 22rpx;
			font-weight: 500;
			color: #ffffff;

			image {
				width: 8rpx;
				height: 16rpx;
				margin-left: 5rpx;
			}
		}
	}

	.box_title {
		width: 690rpx;
		margin: 50rpx auto 0;

		.sort {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			background-color: #000000;
			border-radius: 5rpx;

			text {
				margin-top: 6rpx;
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.form_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form_item {
			width: 660rpx;
			height: 100rpx;
			padding-right: 30rpx;
			position: relative;

			.form_item_left {
				text {
					width: 100%;
				}
			}

			.form_item_right {
				font-size: 28rpx;
				width: 100%;

				.right_icon {
					width: 10rpx;
					height: 20rpx;
				}
			}

			.form_item_right ::v-deep {
				input {
					color: rgba(21, 21, 21, 1) !important;
					font-weight: 500;
				}

				uni-number-box {
					input {
						color: #e4265b !important;
						font-weight: 500;
					}
				}
			}
		}

		.form_item_line::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: #f4f4f4;
			position: absolute;
			top: 99.9%;
		}
	}


	.form_box1 {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding: 89rpx 30rpx 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.dig {
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background-color: #EAEAEA;
		}
	}

	.demand-tit {
		margin-top: 40rpx;

		.line {
			width: 6rpx;
			height: 28rpx;
			background: #EB5E00;
			border-radius: 3rpx;
		}
	}

	.demand-txt {
		font-size: 24rpx;
		color: #666;
		line-height: 46rpx;
		margin-top: 20rpx;
	}

	.errorTips {}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 110rpx;
			border-radius: 20rpx;
			font-size: 36rpx;
			color: #F9F9F9;
		}
	}

	.tip-box {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 60rpx 60rpx 48rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		.cancelbtn {
			background: #EEEEEE;
			font-weight: 600;
			font-size: 28rpx;
			color: #000;
		}
	}

	.scroll-box {
		height: 700rpx;
		overflow-y: scroll;
	}

	::-webkit-scrollbar {
		height: 0;
	}

	.underlined {
		text-decoration: underline;
	}

	.popup3 {
		padding: 30rpx 30rpx 230rpx;

		.line {
			width: 8rpx;
			height: 32rpx;
			background: #1E47E1;
			border-radius: 4rpx;
		}

		.footer {
			background: #FFFFFF;


		}
	}

	.tipsDescBox {
		padding: 30rpx;
		width: 690rpx;
		height: 377rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		position: relative;
	}

	.btn11 {
		width: 260rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		border: 1rpx solid #000000;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
	}

	.imageBox {
		width: 690rpx;
		height: 406rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
		overflow: hidden;
		position: relative;
	}

	.pop-box {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.pop-top {
			height: 120rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #ddd;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #131415;
		}
	}

	.popup-video {}

	.popup-video video {
		width: 100%;
		height: 75vh;
	}
</style>